<template>
  <div class="layout-container">
    <div class="layout-container-form flex space-between">
      <div class="layout-container-form-handle">
        <el-button type="primary" :icon="Plus" @click="handleAdd">{{
            $t("message.common.add")
          }}
        </el-button>
        <el-popconfirm :title="$t('message.common.delTip')" @confirm="handleDel(chooseData)">
          <template #reference>
            <el-button type="danger" :icon="Delete" :disabled="chooseData.length === 0">
              {{ $t("message.common.delBat") }}
            </el-button>
          </template>
        </el-popconfirm>
        <el-select @change="handleSelectStatus" v-model="query.status" class="m-2" placeholder="Select">
          <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
      </div>
      <div class="layout-container-form-search">
        <el-input v-model="query.input" :placeholder="$t('message.common.searchTip')" @change="getTableData(true)">
        </el-input>
        <el-button type="primary" :icon="Search" class="search-btn" @click="getTableData(true)">
          {{ $t("message.common.search") }}
        </el-button>
      </div>
    </div>
    <div class="layout-container-table">
      <Table @row-click="handleCellPost" ref="table" v-model:page="page" v-loading="loading" :showSelection="true"
             :data="tableData" @getTableData="getTableData" @selection-change="handleSelectionChange">
        <el-table-column row-click prop="title" label="标题" align="left">
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center" width="80">
          <template #default="scope">
            <el-button size="small" type="primary">
              {{ scope.row.status == 0 ? "未发布" : scope.row.status == 1 ? "已发布" : "草稿" }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="visits" label="访问量" align="center" width="80">
          <template #default="scope">
            <el-tag class="mx-1" round>
              {{ scope.row.visits > 999 ? '999+' : scope.row.visits }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="editTime" label="更新时间" align="center" width="110">
          <template #default="scope">
            {{ howtime(scope.row.editTime) }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('message.common.handle')" align="center" fixed="right" width="230">
          <template #default="scope">
            <el-button @click="handleSetting(scope.row)">设置</el-button>
            <el-button @click="handleEdit(scope.row)">{{
                $t("message.common.update")
              }}
            </el-button>
            <el-popconfirm :title="$t('message.common.delTip')" @confirm="handleDel([scope.row])">
              <template #reference>
                <el-button type="danger">{{
                    $t("message.common.del")
                  }}
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </Table>
      <Layer :layer="layer" @getTableData="getTableData" v-if="layer.show"/>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {howtime} from "@/utils/system/time";
import {reactive, ref} from "vue";
import Table from "@/components/table/index.vue";
import {Page} from "@/components/table/type";
import {del, listByUser} from "@/api/article/post";
import Layer from "./layer.vue";
import {ElMessage} from "element-plus";
import type {LayerInterface} from "@/components/layer/index.vue";
import {Delete, Plus, Search} from "@element-plus/icons";
import router from "@/router";
// 存储搜索用的数据
const query = reactive({
  input: "",
  status: 0
});
// 弹窗控制器
const layer: LayerInterface = reactive({
  show: false,
  title: "新增",
  showButton: true,
});
// 分页参数, 供table使用
const page: Page = reactive({
  index: 1,
  size: 15,
  total: 0,
});
const status = [
  {
    value: 0,
    label: '全部',
  },
  {
    value: 1,
    label: '已经发布',
  },
  {
    value: 2,
    label: '草稿',
  }
]
const statusValue = ref('0')
const emits = defineEmits(["setPostData"]);
const loading = ref(true);
const tableData = ref([]);
const chooseData = ref([]);
const handleSelectionChange = (val: []) => {
  chooseData.value = val;
};
// 获取表格数据
// params <init> Boolean ，默认为false，用于判断是否需要初始化分页
const getTableData = (init: boolean) => {
  loading.value = true;
  if (init) {
    page.index = 1;
  }
  let params = {
    ...page,
    ...query,
  };
  listByUser(params)
      .then((res) => {
        tableData.value = res.data.list;
        if (init) {
          page.total = Number(res.data.total);
        }
      })
      .catch((error) => {
        tableData.value = [];
        page.index = 1;
        page.total = 0;
      })
      .finally(() => {
        loading.value = false;
      });
};
// 选择数据的状态是否已经发布
const handleSelectStatus = (val: number) => {
  query.status = val
  getTableData(true)
}
// 删除功能
const handleDel = (data: object[]) => {
  let params = [data
      .map((e: any) => {
        return e.postId;
      })
      .join(","),
  ]
  del(params).then((res) => {
    ElMessage({
      type: "success",
      message: "删除成功",
    });
    getTableData(tableData.value.length === 1 ? true : false);
  });
};
// 新增弹窗功能
const handleAdd = () => {
  //跳转
  router.push({
    path: "/artice/add",
  });
};

const handleCellPost = (row: object, column: any, cell: object, event: object) => {
  if (column.property === "title") {
    emits("setPostData", row);
  }

};
// 编辑设置功能
const handleSetting = (row: object) => {
  //发布文章
  layer.row = row,
      layer.title = "设置"
  layer.showButton = false,
      layer.show = true
};

// 编辑弹窗功能
const handleEdit = (row: object) => {
  emits("setPostData", row);
};

getTableData(true);
</script>

<style lang="scss" scoped>
.m-2 {
  margin-left: 12px;
}
</style>